<template>
    <div class="el-scrollbar__wrap">
        <div class="box">
            <div class="top-box">
                <div class="top_content">
                    <i class="el-icon-menu" style="margin-right: 10px;line-height:30px"></i>
                    公司制度
                </div>
                <div class="top_fan">
                    <el-button type="primary" @click="homeInstitution" class="fh">返回</el-button>
                </div>
            </div>

            <h2 class="institutionTitle">
                {{companyInstitution.systemName}}
            </h2>
            <div class="publisher-box">
                <div class="publisher-box-left">
                    <div class="publisher">
                        发布时间：<span>{{companyInstitution.createDate}}</span>
                    </div>
                </div>
            </div>
            <div style="text-align: center;font-size: 12px;padding-top: 16px">
                公司名称：<span style="margin-right: 20px">{{companyInstitution.company.companyName}}</span>
            </div>
            <div class="institutionContent" v-html="companyInstitution.detailsOfCompanySystem"></div>
            <div class="bottom_upper">
                <el-button type="text" @click="lowMeetingNotice">下一页</el-button>
                <el-button type="text" @click="upMeetingNotice">上一页</el-button>
            </div>
        </div>
    </div> 
</template>
<script>
export default {
    data(){
        return{
            companyInstitution:{
                company:{
                    companyName:''
                }
            },
            lows:1,//上下页
            upp:0,
            institutionId:"",//公司制度Id
            remark:''
        }
    },
    methods:{
        // 获取公司制度公告Id
        getInstitutionId(){
           this.institutionId=this.$route.params.id;//通知公告Id
            this.remark=this.$route.params.remarks;
        //    console.log( this.noticeId)
        },
        // 制度详情
        institutionDetails(){
            this.$http({
                url:"/dlyrl/hr/companysystem/companySystem/queryById?id="+this.institutionId,
                method:'get'
            }).then((res)=>{
                    // console.log("制度详情页面",res);
                    this.companyInstitution=res.data.companySystem;
                })
        },
        // 下一页
        lowMeetingNotice(){
            this.$http({
                url:"/dlyrl/hr/userinformation/findSystemNext?id="+this.institutionId+"&type="+this.lows+'&remarks='+this.remark,
                method:'get'
            }).then((res)=>{
                    if(res.data.success){
                        // console.log(res,'res')
                        this.companyInstitution=res.data.companySystem;
                        this.institutionId=res.data.companySystem.id;
                    }
                })
        },
        // 上一页
        upMeetingNotice(){
            this.$http({
                url:"/dlyrl/hr/userinformation/findSystemNext?id="+this.institutionId+"&type="+this.upp+'&remarks='+this.remark,
                method:'get'
            }).then((res)=>{
                    if(res.data.success){
                        this.companyInstitution=res.data.companySystem;
                        this.institutionId=res.data.companySystem.id;
                    }
                })

        },
        // 返回
         homeInstitution(){
            window.history.go(-1)
            // this.$router.push('/mainhome/mainhome');
        }
    },
    mounted(){
        this.getInstitutionId();
        this.institutionDetails();
    }
}
</script>
<style lang="scss" scoped> 
.el-scrollbar__wrap{
        background: #fff;
    }
    .box{
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        background-color: #fff;
    }
    // 顶部会议通知和返回
    .top_content{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-bottom: 5px;
        font-size: 12px;
    }
      .top-box{
        width: 100%;
        display: flex;
        flex-direction: row;
    }
    .top_fan{
        display: flex;
        flex-direction: row-reverse;
    }
    .fh{
        width: 50px !important;
        height: 30px !important;
        font-size: 12px !important;
        padding: 0!important;
    }
    // 公司制度标题
    .institutionTitle{
        padding-top: 35px;
        text-align: center;
        font-size:24px;
        margin:20px 0;
    }
    // 中间内容顶部标题
    .publisher{
        padding-top: 5px;
        padding-left: 10px;
        font-size: 14px;
        color: #666
    }
     .publisher-box{
        width: 65%;
        display: flex;
        flex-direction: row;
        margin: 0 auto;
        padding-bottom: 15px;
        border-bottom: #d3d3d3 1px solid;
    }
    .publisher-box-left{
        width: 100%;
        display: flex;
        flex-direction: row;
    }
    .publisher-box-right{
        width: 50%;
        display: flex;
        flex-direction: row-reverse;
        font-size: 14px;
        color: #666;
    }
    // 制度内容
    .institutionContent{
        padding: 30px 80px;
        box-sizing: border-box;
        // text-align: center;
    }
      // 上，下一页
    .bottom_upper{
        position: absolute;
        bottom: 20px;
        right: 40px;
        display: flex;
        flex-direction: row-reverse;
        font-size: 14px;
    }
    .bottom_upper button{
        margin-left:10px ;
        cursor:pointer
    }
</style>
